//index.js
const app = getApp()

Page({
  data: {
    IsSignIn: false,
    files: null,
    errorType: "",
    content: "",
    tips: "",
    fileID: "",
    userinfo: null,
  },
  onLoad: function(){
    this.setData({
      IsSignIn: app.globalData.IsSignIn,
      imageSelect: this.imageSelect.bind(this)
    })
  },
  input: function(e){
    this.setData({
      content: e.detail.value
    })
  },
  imageSelect: function(files){
    // 后续可以在这里调整逻辑,可不可以使用图片压缩算法呢？
    console.log(files)
    // 文件的大小单位为B(tempFiles[0].size)
    var that = this
    var imageSize = files.tempFiles[0].size           // 图片的大小
    var width = 0                                     // 图片的宽度
    var height = 0                                    // 图片的高度
    var type = ""                                     // 图片的类型（PNG，JPG）
    var url = files.tempFilePaths[0]
    function check(width,height,type,imageSize){
      // 图片的格式不是PNG时，不予上传
      console.log(this)
      if(type !== 'png'){
        that.setData({
          errorType: '图片的格式是' + type + ',不是PNG,不能上传'
        })
        return false
      }
      // 图片大小大于1MB时，不予上传。同时提示用户
      if(imageSize > Math.pow(2,20)){
        var size = ((imageSize / Math.pow(2,20)).toFixed(2)).toString()
        that.setData({
          errorType: '待上传的图片大小为' + size + 'MB.超过限制，不能上传'
        })
        return false
      } 
      // 如果图片的大小比例不是4:3
      console.log((width / height).toFixed(3))
      if((width / height) !== 4/3){
        that.setData({
          errorType: '图片的大小比例不是4:3,不能上传'
        })
        return false
      }
      // 如果该图片满足所有条件
      return true
    }
    // 获取图片的信息,同时验证图片是否满足条件
    this.getImageInfo(files.tempFilePaths[0]).then((imageInfo) => {
      width = imageInfo.width
      height = imageInfo.height
      type = imageInfo.type
      console.log(type)
      // 图片格式信息验证通过后，上传图片
      if(check(width,height,type,imageSize)) {
        var image = { url: '' }
        image.url = url
        console.log("OK")
        var files = []
        files.push(image)
        console.log("OK")
        that.setData({
          files: files
        })
        console.log(that.data.files.length)
      } else{
        return false
      }
    }).catch((_) => {
      return false
    })
  },
  /*
    提交前，如果用户没有注册，这里将提示用户注册
  */
  signIn: function(e){
    console.log(e)
    if(!this.data.IsSignIn){
      this.getUserProfile()
    } 
    // 如果用户已经注册
    else {
      this.submit()
    }
  },

  getUserProfile() {
    console.log("getUserProfile")
    var that = this
    // 使用wx.getUserProfile获取用户信息
    wx.getUserProfile({
      desc: '获取信息用于优化您的使用体验', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        console.log(res)
        var userInfo = { avatar: res.userInfo.avatarUrl, nickname: res.userInfo.nickName, 
          lang: res.userInfo.language }
        app.globalData.userinfo = userInfo
        this.setData({
          IsSignIn: true
        })
        // 获取信息后，进行进行注册
        wx.request({
          url: 'http://localhost:8000/signIn',
          method: 'POST',
          data: {
            userInfo: userInfo,
            oid: app.globalData.oid
          },
          success(res){
            console.log(res)
          },
          fail(err){
            console.log(err)
          }
        })
      }, 
      fail(err){
        console.log(err)
      },
      // 保证用户即使不进行注册也可以使用小程序
      complete(){
        that.submit()
      }
    })
  },

  /*
  ** 以下函数均与请求或处理相关
  */

  // 获取图片的信息
  getImageInfo: function(src){
    return new Promise((resolve, reject) => {
      wx.getImageInfo({
        src: src,
        success: (res) =>{
          console.log(res)
          resolve({
            width: res.width,
            height: res.height,
            type: res.type,
            url: src
          })
        },
        fail: (err) => {
          reject(err)
        }
      })
    })
  },
  // tip：Url问题已经得到初步解决，如果有一个图床更好！
  submit: function(){
    wx.showLoading({
      title: '正在上传'
    })
    var content = this.data.content
    var tempUrl = ""
    var contentUrl = ""
    var cloudPath = ""
    var that = this
    // 有文字需要上传时,将文字转化为base64格式的URL，已经测试完成
    if(content !== ''){
      this.text2img(content).then((result) =>{
        contentUrl = result.url
        console.log(contentUrl)
      }).catch((_) =>{
        console.log(_)
      })
    }
    // 有图片需要上传的情况
    if(this.data.files !== null){
      tempUrl = this.data.files[0].url
      // 以临时路径的后16位作为云路径
      cloudPath = "e-" + tempUrl.slice(tempUrl.length - 20,tempUrl.length)
      console.log(cloudPath)
      wx.cloud.uploadFile({
        filePath: tempUrl,
        cloudPath: cloudPath,
        success(res){
          console.log(res)
          that.setData({ fileID: res.fileID })
          // 获取文件Url
          that.getFileUrl(that.data.fileID).then((result) =>{
            var imageUrl = result.imageUrl
            console.log(imageUrl)
            // 如果有文字或者是图片时，可以上传
            that.upload(contentUrl,imageUrl).then(() =>{
              wx.hideLoading()
              that.setData({
                tips: "",
                files: null,
                content: ""
              })
            }).catch((err) =>{
              wx.hideLoading()
              console.log(err)
              that.setData({ tips: err.tips })
            })
          }).catch((_) =>{
            console.log(_)
          })
        },
      })
    } 
    // 如果只有文字的话，无须处理图片,这时文件URL为空
    else{
      this.upload(contentUrl,"").then(() => {
        wx.hideLoading()
        this.setData({
          tips: "",
          files: null,
          content: ""
        })
      }).catch((err) => {
        wx.hideLoading()
        console.log(err)
        that.setData({ tips: err.tips })
      })
    }
      
  },
  
  /**
   * 将图片与文字上传到服务器
   * @param string contentUrl  imageUrl   
   */
  upload: function(contentUrl,imageUrl){
    // 如果图片的URL存在或者是用户上传了文字
    var that = this
    return new Promise((resolve,reject) =>{
      wx.request({
        url: "http://localhost:8000/uploadUserData",
        method: "POST",
        data: {
          contentUrl,
          imageUrl
        },
        success(res){
          console.log(res)
          if(res.statusCode.toString()[0] === '2'){
            // 发送成功后，清空数据
            if(res.data.flag === 'T'){
              wx.showToast({
                title: '上传成功！',
              })
              resolve({
                flag: true
              })
            } 
          }
          // 出现错误的处理
          else {
            reject({
              tips: "网络不佳，上传失败"
            })
          }
        },
        fail(err){
          console.log(err)
          reject({
            tips: "系统正在维护，上传失败"
          })
        },
      })
    })
  },

  imageDelete: function(e){
    console.log(e)
    this.setData({
      files: null
    })
  },

  /**
   * 利用图片的云文件ID，从云数据库当中获取图片的URL
   * @param string fileID   
   */
  getFileUrl: function(fileID){
    return new Promise((resolve,reject) =>{
      var fileList = [];
      var imageUrl = ""
      fileList.push(fileID)
      wx.cloud.getTempFileURL({
        fileList: fileList,
        success(res){
          console.log(res)
          imageUrl = res.fileList[0].tempFileURL
          resolve({
            imageUrl: imageUrl
          })
        },
        fail: (err) =>{
          reject(err)
        }
      })
    })
  },

  /**
   * 将文字转化为图片,需要考虑规定输入字符串的长度,还要考虑图片的大小比例为4:3
   * @param string text     
   */
  text2img: function(text){
    return new Promise((resolve,reject) =>{
      // 变量初始化配置
      var textLen = 12                                // 在图片当中，一行文字长度定为12
      var fontSize = 15                               // 文字大小，单位为px
      var fontWeight = 'bold'                         // 文字是否加粗，可以考虑加粗
      var text4Line = text.split('\n')                // 按照文本当中的换行符分行，分行后的结果保存在这里
      var line = 1                                    // 显示在图片中的行数

      console.log(text4Line)
      var url = ''

      const query = wx.createSelectorQuery()

      query.select('#myCanvas')
        .fields({ node: true, size: true })
        .exec((res) => {
          console.log(res)
          const canvas = res[0].node
          const context = canvas.getContext('2d')
          canvas.width = fontSize * textLen + 60
          canvas.height = 1.5 * fontSize * (1 + Math.ceil(text4Line.length - 1))
          if(canvas.height <= 180)
            canvas.height = 180
          else
            canvas.weight = 1.5 * canvas.height
          context.clearRect(0, 0, canvas.width, canvas.height)
          context.font = fontWeight + ' ' + fontSize + 'px 微软雅黑'
          context.textBaseline = 'top'
          function textFill(txt){
            while(txt.length > textLen){
              var txtLine = txt.substring(0, textLen)
              txt = txt.substring(textLen)
              context.fillText(txtLine, 0, 1.5 * fontSize * line++, canvas.width)
            }
            context.fillText(txt, 0, 1.5 * fontSize * line, canvas.width)
          }
      
          for(var i = 0; i < text4Line.length; i++){
            textFill(text4Line[i])
            context.fillText('\n', 0, fontSize * (3 / 2) * line++, canvas.width);
          }
          url = canvas.toDataURL()
          console.log(url)
          resolve({
            url: url
          })
        })
      })
    
  }
})
